<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax_解析json数据</title>
    <style>
        #content {
            width: 300px;
            height: 100px;
            border: 1px solid black;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<h3>该页面是测试：Ajax_解析json数据</h3>
<button id="btn">点我发送请求(原生js-ajax-get)</button>
<div id="content"></div>
<script type="text/javascript">
    const btn = document.getElementById('btn')
    const content = document.getElementById('content')

    btn.onclick = () => {
        // 实例 xhr
        const xhr = new XMLHttpRequest()

        // 绑定监听
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    // 自己手动解析 JSON 数据
                    // const {name, age, sex} = JSON.parse(xhr.response)
                    const {name, age, sex} = xhr.response
                    content.innerHTML = (`
                    <ul>
                        <li>${name}</li>
                        <li>${age}</li>
                        <li>${sex}</li>
                    </ul>
                    `)
                }
            }
        }

        // 配置请求
        xhr.open('GET', 'http://localhost:8080/get_person')

        // responseType：用于指定返回数据的格式
        xhr.responseType = 'json'

        // 发送请求
        xhr.send()
    }
</script>
</body>
</html>
